Programming with SQL Azure : WCF Data Services (part 3)

1/10/2011 11:53:04 AM

4. Creating the User Interface

You're almost done. You need a user interface in which to display the data you query via the data service, so open up the Default.aspx in the Azure Web Role project and select the Source tab. Replace the code that you see with the following code which defines a list box, label, and combo box:

<%@ Page Title="Home Page" Language="C#" AutoEventWireup="true"
    CodeBehind="Default.aspx.cs" Inherits="WebRole1._Default" %>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:ListBox ID="docsList" runat="server"

OnSelectedIndexChanged="docsList_SelectedIndexChanged"
                AutoPostBack="true">
            </asp:ListBox>
            <br />
            <br />
            <asp:Label ID="infoLabel" runat="server"></asp:Label>
            <br />
            <br />
            <asp:DropDownList ID="authorList" runat="server">
            </asp:DropDownList>
        </div>
    </form>
</body>
</html>

The last thing you need to do is add the events that are defined in the code above, specifically the docsList_SelectedIndexChanged event. Click the Design tab for the Default.aspx page and double click the list box, which will create the docsList_SelectedIndexChanged event. However, before you put code in this event, you need to put some code in the Page_Load event as well as define a few variables. First, add the following using statements:

using System.Data.Services.Client;
using WebRole1.TechBioServiceReference;

Next, add the following declarations. These define the DataServiceContext and URI to the data service. You can get the URL from the Add Service Reference box shown in Figure 4:

private TechBioEntities context;
private Uri svcUri = new Uri("http://localhost:51176/TechBioDataService.svc");

Next, add the following code to the Page_Load event. This instantiates the data service context, and loads the list box with available documents and the combo box with available users:

context = new TechBioEntities(svcUri);

DataServiceQuery<Doc> docs = context.Docs;
DataServiceQuery<User> users = context.Users;

foreach (Doc d in docs)
{
    docsList.Items.Add(new ListItem(d.Name, d.ID.ToString()));
}

foreach (User u in users)
{
    authorList.Items.Add(new ListItem(u.Name, u.ID.ToString()));
}

Finally, add the following code to the docsList_SelectedIndexChanged event. This code queries the docs table to get the document information for the selected doc and displays the associated document description and price in the label, then selects the author (userid) for the selected document. By the way, the query you see below is LINQ to Entities, a LINQ (Language-Integrated Query) query that enables developers to write queries using LINQ syntax against an Entity Framework conceptual model:

var docInfo = (from d in context.Docs
                where d.ID == Convert.ToInt32(docsList.SelectedItem.Value)
                select d).FirstOrDefault();

Code View: Scroll / Show All

infoLabel.Text = string.Concat("Desc: ", docInfo.Descr, "   ", "Price: ", docInfo.PurchasePrice.ToString());

authorList.SelectedIndex = docInfo.AuthorId;

5. Running the Application

You're ready to run your application! Make sure that the Web Role project is the startup project by right clicking the Web Role project and selecting Set as Startup Project from the context menu. Go ahead and press F5 to build and run the project. When the web page in Figure 6-15 comes up, the list box will be populated with the list of documents from the Docs table. Scroll through the list and select a document which will then populate the label with the appropriate description and price, as well as select the associated author in the combo box.

Figure 6. Running Application

Congratulations, you've successfully built a WCF Data Service that connects to, and queries, a SQL Azure database. While this was a fairly simple example, it should be enough to provide you with a solid foundation on which to start building and architecting data services for the cloud.